<template>
	<view class="wrapper">
		<up-navbar placeholder autoBack title="" bgColor="rgba(0,0,0,0)" left-icon-size="24"></up-navbar>
		<!-- <div class="header posf w100">
			<image src="../../static/back.png" mode="widthFix" class="back" @click="back(1)"></image>
		</div> -->
		<div class="main">
			<div class="center mb28">
				<image src="../../static/t-logo.png" mode="widthFix" class="logo-pic"></image>
			</div>
			<div class="box1 bfff mb30">
				<div class=" space-between  ">
					<image src="/static/phone.png" mode="widthFix" class="nav-icon mr26"></image>
					<div class="f28 c333 flex1">手机号码</div>
					<div class="f28 fbold">{{userInfo.userInfo.mobile}}</div>
				</div>
				<div class="hr"></div>
				<div class=" space-between  " @click="goFontSize">
					<image src="/static/font.png" mode="widthFix" class="nav-icon mr26"></image>
					<div class="f28 c333 flex1">字号调整</div>
					<image src="../../static/index/箭头@2x.png" mode="widthFix" class="arrow-right"></image>
				</div>
			</div>

			<!-- <div class="bfff space-between box1 mb18" @click="goDtc">
				<div class="f28 c333">DTC</div>
				<image src="../../static/index/箭头@2x.png" mode="widthFix" class="arrow-right"></image>
			</div> -->
			<!-- <div class="dialogue bfff">
				<div class="f32 fbold mb20">最近对话</div>
				<div class="questions-box" v-for="v in 5" @click="open('../detail/detail?text=如何使用监控系统型号F0025')">
					<div class="f28 c333 nowrap">如何使用监控系统型号F0025</div>
				</div>
				<div class="space-between mt30">
					<div class="f28 cee7">查看全部 （20）</div>
					<image src="../../static/index/箭头@2x.png" mode="widthFix" class="arrow-right"></image>
				</div>
			</div> -->
			<div class="bfff space-between box1" @click="userLogout">
				
				<image src="/static/exit.png" mode="widthFix" class="nav-icon mr26 "></image>
				<div class="f28 c333 flex1">退出</div>
				<image src="../../static/index/箭头@2x.png" mode="widthFix" class="arrow-right"></image>
			</div>
		</div>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";

	import {
		logout
	} from '../../apis/login';
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	const userInfo = uni.getStorageSync('userinfo')
	const {
		proxy
	} = getCurrentInstance()
	// 跳转
	function goFontSize() {
		uni.navigateTo({
			url: '../fontSIze/fontSIze'
		})
	}

	function goDtc() {
		uni.navigateTo({
			url: '../dtcIndex/dtcIndex'
		})
	}

	async function userLogout() {
		let result = (await logout({
			appid: 'wx511728e8c5850f0b'
		}));
		uni.clearStorageSync()
		uni.navigateTo({
			url: '../index/index'
		})
	}

	onLoad((option) => {

	});

	onShow(() => {

	});
</script>

<style lang="scss" scoped>
	.wrapper {
		background-color: #f7f7f7;
		min-height: 100vh;
		overflow: hidden;
	}

	.main {
		padding: 60rpx 20rpx;

		.btn-tui {
			width: 505rpx;
			height: 103rpx;
			box-shadow: 3rpx 0rpx 8rpx 0rpx rgba(198, 198, 198, .3);
			border-radius: 54rpx;
			margin-top: 105rpx;
		}

		.dialogue {
			box-shadow: 3rpx 0rpx 8rpx 0rpx rgba(198, 198, 198, .4);
			border-radius: 25rpx 25rpx 25rpx 25rpx;
			padding: 40rpx 30rpx 45rpx;

			.questions-box {
				// width: 670rpx;
				padding: 34rpx 0 40rpx;
				border-bottom: 1rpx solid #EFEFF4;
			}

			.arrow-right {
				width: 20rpx;
				height: 30rpx;
			}

			.cee7 {
				color: #EE7C4B;
			}
		}

		.box1 {
			// height: 100rpx;
			box-shadow: 3rpx 0rpx 8rpx 0rpx rgba(198, 198, 198, .4);
			border-radius: 20rpx;
			padding: 22rpx 30rpx;

			.hr {
				background-color: #efefef;
				height: 1rpx;
				margin: 22rpx 0;
			}

			.nav-icon {
				width: 60rpx;
				height: 60rpx;
				border-radius: 20rpx;
			}
			.exit-icon{
				background-color: #666;
			}
			.arrow-right {
				width: 20rpx;
				height: 28rpx;
			}
		}

		.logo-pic {
			width: 310rpx;
			height: 310rpx;
			margin: 30rpx auto 50rpx;
			display: block;
		}
	}

	.header {
		left: 0;
		top: 0;
		padding: 10rpx 25rpx;

		.back {
			width: 36rpx;
			height: 40rpx;
		}
	}
</style>